<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:38:01
 * @LastEditTime: 2021-06-21 17:39:10
 * @LastEditors: coocase
 * @Description: 确认支付
 * @FilePath: \git\dami\src\pages\pay\confirmInfo.vue
-->
<template>
  <div class="confirm-wrap">
    <Steps :current="1">
      <Step title="选择商品"></Step>
      <Step title="确认订单信息"></Step>
      <Step title="支付订单"></Step>
      <Step title="收取商品"></Step>
    </Steps>
    <div class="delivery-way">
      <div class="delivery-title">配送方式</div>
      <div class="way-list">
        <div class="list-el">
          <svg class="icon icon-qr" aria-hidden="true">
            <use xlink:href="#icon-qr1154761easyiconnet"></use>
          </svg>
          <span>电子票</span>
        </div>
      </div>
      <div class="delivery-tip">
        <Icon
          type="ios-alert"
          color="#FF1268"
        />支付成功后，打开APP出示票夹中的二维码直接入场，无需取票
      </div>
      <div class="delivery-form">
        <Form ref="form" :model="form" :rules="rule" class="form">
          <FormItem class="input-wrap" prop="user" label="联系人">
            <Input
              class="input"
              type="text"
              v-model="form.user"
              placeholder="Username"
            >
            </Input>
          </FormItem>
          <FormItem class="input-wrap" prop="phone" label="手机号">
            <Input
              class="input"
              type="text"
              v-model="form.phone"
              placeholder="phone"
            >
            </Input>
          </FormItem>
          <!-- <FormItem>
                    <Button type="primary" @click="handleSubmit('form')">Signin</Button>
                </FormItem> -->
        </Form>
      </div>
    </div>
    <div class="pay-type-wrapper">
      <div class="pay-type-title">支付方式</div>
      <div class="pay-type-list-wrap">
        <img src="../../assets/alipay.png" alt="" />
      </div>
    </div>
    <div class="order-item">
      <div class="item-title">确认订单信息</div>
      <div class="order-item-list">
        <div class="list-table">
          <div class="table-header">
            <Row>
              <Col span="11" class="table-col">
                <div class="table-title">项目信息</div>
                <div class="table-body1">
                  <div class="project-wrap">
                    <!-- <div ></div> -->
                    <img class="project-img" :src="moiveInfo.imgUrl" alt="" />
                    <div class="projec-info">
                      <span class="project-info-title"
                        >{{ moiveInfo.itemName }}
                      </span>
                      <span class="project-info-date" v-if="buydatas.startTime"
                        >{{ buydatas.startTime[0].time }} 单次通票</span
                      >
                      <span class="project-info-adrress">{{
                        buydatas.adress
                      }}</span>
                    </div>
                  </div>
                </div>
              </Col>
              <Col span="2" class="table-col">
                <div class="table-title">座位信息</div>
                <div class="table-body">
                  <div
                    class="seat-info"
                    v-for="seat in selected"
                    v-if="selected.length"
                  >
                    <span>{{ seat[0] + 1 }}</span
                    >排 <span>{{ seat[1] + 1 }}</span
                    >座
                  </div>
                </div>
              </Col>
              <Col span="2" class="table-col">
                <div class="table-title">单价</div>
                <div class="table-body">
                  <div
                    class="unit-price"
                    v-for="seat in selected"
                    v-if="selected.length"
                  >
                    <span>￥{{ price(seat[2]) }}</span>
                  </div>
                </div>
              </Col>
              <Col span="2" class="table-col">
                <div class="table-title">数量</div>
                <div class="table-body">
                  <div
                    class="count"
                    v-for="seat in selected"
                    v-if="selected.length"
                  >
                    &times1
                  </div>
                </div></Col
              >
              <Col span="3" class="table-col">
                <div class="table-title">优惠</div>
                <div class="table-body"></div
              ></Col>
              <Col span="4" class="table-col">
                <div class="table-title">小计</div>
                <div class="table-body">
                  <div class="price-total">￥{{ moiveInfo.minPrice }}</div>
                </div></Col
              >
            </Row>
          </div>
        </div>
      </div>
      <div class="order-item-tips">
        <Row>
          <Col span="12">
            <span class="tips-title">开具发票:</span>
            <span class="tips-content"
              >请在支付完成后，前往大麦APP开具发票</span
            >
          </Col>
          <Col span="12">
            <span class="tips-title">配送方式:</span>
            <span class="tips-content">电子票</span>
          </Col>
        </Row>
      </div>
    </div>
    <div class="term">
      <span>
        <Checkbox v-model="single"></Checkbox>
        我已经阅读并同意<a>《订票服务条款》</a></span
      >
      <span>同意"票品为不记名凭证，请您妥善保管，遗失不补"</span>
    </div>
    <div class="order-pay">
      实付款: <span class="pay-icon">￥</span
      ><span class="pay-money">{{ moiveInfo.minPrice }}</span>
    </div>
    <div class="submit">
      <Button type="primary" :disabled="!single" @click="handleSubmit('form')"
        >同意以上协议并提交订单</Button
      >
    </div>
  </div>
</template>

<script>
import bus from "../../common/eventBus";
export default {
  name: "confirm",

  data() {
    return {
      moiveInfo: JSON.parse(localStorage.getItem("itemInfo")),
      single: false,
      form: {
        user: "",
        phone: "",
      },
      rule: {
        user: [{ required: true, message: "请填写用户", trigger: "blur" }],
        phone: [
          {
            required: true,
            message: "请填写手机号.",
            trigger: "blur",
          },
          {
            type: "string",
            len: 11,
            message: "手机格式错误",
            trigger: "blur",
          },
        ],
      },
      buydatas: "",
      selected: "",
    };
  },
  created: function () {
    bus.$off("paydatas").$on("paydatas", (paydatas, selected) => {
      this.buydatas = paydatas;
      this.selected = selected;
    });
  },
  mounted() {
    if (!this.buydatas.itemName) {
      console.log("buydatas");
      this.getDetail();
    }
  },
  beforeDestroy() {
    bus.$emit("paydatas", this.buydatas, this.selected, this.form);
  },
  computed: {
    getprice() {
      var arr = [];
      if (this.buydatas.itemPrice) {
        //不做判断的话，数据不存在时则会报错 foreach 未定义
        this.buydatas.itemPrice.forEach((el) => {
          arr.push(el.price);
        });
      }
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            let el = arr[j + 1];
            arr[j + 1] = arr[j];
            arr[j] = el;
          }
        }
      }
      return arr;
    },
  },
  methods: {
    handleSubmit(name) {
      localStorage.setItem("user", this.form.user);
      localStorage.setItem("phone", this.form.phone);
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success("Success!");
          this.$router.push({ name: "qrPay" });
        } else {
          this.$Message.error("请填写收获人信息!");
        }
      });
    },
    //根据等级返回价格
    price: function (level) {
      var price = 0;
      switch (level) {
        case 3:
          price = this.getprice[3];
          break;
        case 4:
          price = this.getprice[2];
          break;
        case 5:
          price = this.getprice[1];
          break;
        default:
          price = this.getprice[0];
          break;
      }
      return price;
    },
    totalPrice() {
      var total = 0;
      for (let i = 0; i < this.selected.length; i++) {
        const element = this.selected[i];
        total = total + this.price(this.selected[i][2]);
      }
      return total;
    },
    getDetail: function () {
      this.$http
        .getRequest({
          api: "detail",
          data: {},
        })
        .then((res) => {
          this.buydatas = res;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.confirm-wrap {
  width: 1200px;
  margin: 20px auto;
}
.delivery-way,
.pay-type-wrapper {
  margin: 30px 0;
}
.delivery-title,
.pay-type-title,
.item-title {
  font-size: 20px;
}
.way-list {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}
.list-el {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.icon-qr {
  background-color: #ff1268;
  font-size: 100px;
  color: #eee;
  border-radius: 50%;
  margin-bottom: 10px;
}
.delivery-tip {
  margin-top: 50px;
}
.form {
  margin-top: 30px;
}
.input-wrap {
  margin-bottom: 10px;
}
.input {
  width: 200px;
}
.pay-type-list-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 30px;
  margin-top: 30px;
  border: 2px solid #ff1268;
  width: 245px;
}
.order-item-list {
  margin: 30px;
}
.table-col {
  text-align: center;
  font-size: 12px;
}
.table-body {
  /* height: 80px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
/* .table-body1{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
} */
.project-wrap {
  margin: 20px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.project-img {
  width: 62px;
  height: 80px;
  background-color: brown;
}
.projec-info {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 20px;
}
.project-info-title {
  color: #4a4a4a;
}
.project-info-date {
  color: #9b9b9b;
}
.project-info-adrress {
  color: #9b9b9b;
}
.price-total {
  font-weight: bold;
  font-size: 16px;
}
.order-item-tips {
  color: #826666;
  font-size: 12px;
  line-height: 16px;
  /* padding:16px; */
  padding-left: 16px;
  margin-left: 30px;
}
.term {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  font-size: 12px;
  color: #826666;
}
.term span {
  display: inline-block;
}
.order-pay {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 30px;
}
.submit {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 30px;
}
.icon-check {
  color: red;
  font-weight: bold;
  font-size: 16px;
}
.pay-icon {
  font-size: 30px;
  color: #999;
}
.pay-money {
  font-size: 30px;
  color: #ff1268;
}
</style>
